<template>
  <div class="dashboard">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); margin-bottom:14px"
      title="工作台"
    >
    </a-page-header>
    <a-card title="帐户总览">
      <a-descriptions>
        <!-- <a-descriptions-item label="账户结余">
          <span class="red">0.00</span>
        </a-descriptions-item>
        <a-descriptions-item label="冻结金额">
          <span class="gray">0.00</span>
        </a-descriptions-item>
        <a-descriptions-item label="可用余额">
          <span class="red">0.00</span>
        </a-descriptions-item> -->
        <a-descriptions-item label="公司编码">
          <span class="red">{{ user.company_code }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="SKU总数">
          <span class="orange">{{ skuTotal }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <a-button type="primary"
            ><router-link to="/dashboard/skus_create"
              >创建SKU</router-link
            ></a-button
          >
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skuTotal: 0
    };
  },
  created() {
    this.fetchIndexData();
  },
  methods: {
    fetchIndexData() {
      this.$axios
        .get(process.env.VUE_APP_BACKGROUND_API + "/api/sku/total")
        .then(response => {
          this.skuTotal = response.data;
        });
    }
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  }
};
</script>

<style lang="scss">
.dashboard {
  .ant-descriptions-item-label {
    font-size: 18px;
  }
  .ant-descriptions-item-content {
    font-weight: 600;
    font-size: 18px;
    .red {
      color: #f00;
    }
    .gray {
      color: gray;
    }
    .orange {
      color: #f0ad4e;
    }
  }
}
</style>
